<template>
  <!-- 精选歌单组件 -->
  <scroll-view scroll-x class="scoll">
    <div class="sift-songlist">
      <div class="list-item" v-for="(item,index) in list" :key="index">
        <div class="img-box">
          <image
            mode="widthFix"
            :src="item.coverImgUrl"
          />
        </div>
        <text class="row_2">
         {{item.name}}
        </text>
        <div class="paly-count">
          <i class="iconfont icon-bofang"></i>{{get_playcount(100)}}
        </div>
      </div>
    </div>
  </scroll-view>
</template>

<script>
import {get_sift_songlist} from '../../../network/find'

export default {
  data() {
    return {
      list:[]
    }
  },
  created() {
    get_sift_songlist().then(res=>{
      // console.log(res);
      this.list =  res.playlists
    })
  },
  computed: {
    get_playcount(){
      return (i)=>{
        return i
      }
    }
  },


};
</script>

<style lang="scss">
.scoll {
  padding: 0 20rpx;
}
.sift-songlist {
  white-space: nowrap;
  display: inline-block;
  .list-item {
    display: inline-block;
    margin-right: 30rpx;
    width: 200rpx;
    position: relative;
    .img-box {
      width: 200rpx;
      image {
        width: 100%;
        border-radius: 6rpx;
      }
    }
    .paly-count{
      position: absolute;
      top: 2px;
      right: 2px;
      color: #fff;
      font-size: 24rpx;
    }
  }
}
</style>